<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>方舟B 接入DEMO</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="./style/plugIn/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./style/plugIn/bootstrap/css/bootstrap-theme.min.css">
    <script src="./style/plugIn/bootstrap/js/jquery.min.js"></script>
    <script src="./style/plugIn/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./style/plugIn/JSON.js"></script>
    <script type="text/javascript" src="./style/index.js"></script>
    <script type="text/javascript" src="./style/console.js"></script>
    <!-- 同步接入加密模块SDK-->
    <script type="text/javascript" src="./sdk/AnalysysAgent_Encrypt.min.js"></script>
    <!--同步接入加密模块SDK -->

    <!-- 同步接入GBK转码模块SDK-->
    <script type="text/javascript" src="./sdk/AnalysysAgent_GBK.min.js"></script>
    <!--同步GBK转码模块SDK -->

    <!-- 初始化SDK -->
    <script type="text/javascript" src="./javascript/initSdk.js"></script>
    <!-- 初始化完毕 -->
    <!-- 同步接入SDK -->
    <script type="text/javascript" src="./sdk/AnalysysAgent_JS_SDK.min.js"></script>
    <!--同步接入SDK -->
</head>

<body>
    <header class="navbar navbar-static-top bs-docs-nav bg-primary">
        <h1 class="text-center">JS SDK接入DEMO</h1>
    </header>
    <div class="container">
        <div class="btn-group-vertical center-block" role="group">
            <!-- DevInfo-->
            <div class="panel panel-info">
                <div class="panel-footer" style="word-wrap: break-word;">
                    <br> 2.当前DEMO的appkey为commondebug,如需修改为其他appkey，请在代码中修改
                    <br> 1.当前DEMO的上传日志地址为https://sdk.analysys.cn:4089/,如需修改请配置setUploadURL参数
                    <bar> 3.当前DEMO的获取可视化配置接口地址为https://sdk.analysys.cn:4089/,setVisitorConfigURLc参数
                        <br> 1.当前DEMO为调试模式为1的模式，即上传日志不入库计算模式
                        <br> 3.任何操作所产生的上传日志将在浏览器开发工具及页面中日志展示部分同步展示，此功能仅作为DEMO使用
                        <br> 4.操作通用属性将在通用属性部分同步展示，此功能仅作为DEMO使用
                </div>
                <a href="javascript:void(0)" style="display: block;" class="panel-heading has-feedback">
                    <h3 class="panel-title">日志展示</h3>
                </a>
                <div class="panel-footer" style="word-wrap: break-word;height: 130px;width: 100%" id="upLog">
                </div>
                <h2>跳转页面</h2>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <a class="panel-title" href="./index.html">跳转第一页</a>
                    </div>
                </div>
                <!-- 页面事件 -->
                <h2>AnalysysAgent.pageView:页面事件</h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)" onclick="pageView('活动页')">活动页</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="pageView('商品页',{ 'commodityName': 'iPhone', 'commodityPrice': 8000 })">商品页</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="historyPage('indexHistory.html')">修改history跳转</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="hashPage('#hashPage')">hash跳转</a>
                            </div>
                        </div>
                    </div>
                    <!--  <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)" onclick="window.open('index.html')">新打开页面</a>
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例:正在开展某个活动,需要统计活动页面</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 添加页面
                    <br>
                    <br> AnalysysAgent.pageView("活动页");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：购买一部iPhone手机,手机价格为8000元</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 添加页面并设置页面属性
                    <br>
                    <br> var pageInfo ={ "commodityName": "iPhone", "commodityPrice": 8000 }
                    <br>
                    <br> AnalysysAgent.pageView("商品页", pageInfo);
                </div>
                <!-- 点击事件 -->
                <h2>AnalysysAgent.track:点击事件</h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)" onclick="track('buttonClick')">添加事件</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="track('buttonClick',{'money':'2000'})">添加事件并设置</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：当用户从当前页面点击按钮时,需要统计该点击事件且无其他属性。</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 添加事件
                    <br>
                    <br> AnalysysAgent.track("buttonClick");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：当用户从当前页面点击按钮时,需要统计该点击事件且无其他属性。</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 添加事件并设置事件属性
                    <br>
                    <br> var eventInfo = { "money":2000 }
                    <br>
                    <br> AnalysysAgent.track("buttonClick",eventInfo);
                </div>
                <!-- 通用属性 -->
                <!-- 注册通用属性 -->
                <h2>AnalysysAgent.registerSuperProperty/AnalysysAgent.registerSuperProperties:注册通用属性 </h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="registerSuperProperty('member','VIP')">设置单个通用属性</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="registerSuperProperties({'age':20,'member':'VIP'})">设置多个通用属性</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：购买一年腾讯会员，今年内只需设置一次即可</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置单个通用属性
                    <br>
                    <br> AnalysysAgent.registerSuperProperty("member","VIP");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：购买了一年腾讯会员和设置了用户的年龄</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置多个通用属性
                    <br>
                    <br>var superProperty = { "age":20, "member":"VIP" }
                    <br>
                    <br> AnalysysAgent.registerSuperProperties(superProperty);
                </div>
                <!-- 删除通用属性 -->
                <h2>AnalysysAgent.unRegisterSuperProperty/AnalysysAgent.clearSuperProperties():删除通用属性 </h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <!--identify 设置identifyID -->
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="unRegisterSuperProperty('age')">删除单个通用属性</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <!--identify 设置identifyID -->
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="clearSuperProperties()">清除所有通用属性</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：删除设置的用户年龄属性</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 删除单个通用属性
                    <br>
                    <br> AnalysysAgent.unRregisterSuperProperty("age");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：清除所有已经设置的通用属性</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 清除所有通用属性
                    <br>
                    <br> AnalysysAgent.clearSuperProperties();
                </div>
                <!-- 获取通用属性 -->
                <h2>AnalysysAgent.getSuperProperty/AnalysysAgent.getSuperProperties():获取通用属性 </h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <!--identify 设置identifyID -->
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="getSuperProperty('age')">获取单个通用属性</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <!--identify 设置identifyID -->
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="getSuperProperties()">获取所有通用属性</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：查看已经设置的“member”的通用属性</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 获取单个通用属性
                    <br>
                    <br> AnalysysAgent.getSuperProperty("member");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：查看所有已经设置的通用属性</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 获取所有通用属性
                    <br>
                    <br> AnalysysAgent.getSuperProperties();
                </div>
                <!-- 用户属性 -->
                <!-- 用户ID设置 -->
                <h2>AnalysysAgent.identify:用户ID设置 </h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <!--identify 设置identifyID -->
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="identify('userName')">用户ID设置</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：淘宝店铺使用该功能时，只关注访客用户或店铺会员，不关注设备信息</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置 distinctId
                    <br>
                    <br> AnalysysAgent.identify("userName");
                </div>
                <!-- 用户关联 -->
                <h2>AnalysysAgent.alias:用户关联 </h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <!--reset 清除所有ID 超级属性 profile设置 -->
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)" onclick="alias('sanban')">关联</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：一班同学升学时，调换班级到三班</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置 aliasId
                    <br>
                    <br> AnalysysAgent.alias("sanban");
                </div>
                <!-- 获取匿名ID -->
                <h2>AnalysysAgent.getDistinctId:获取匿名ID </h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)" onclick="getDistinctId()">获取匿名ID</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：获取当前设备匿名ID</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    <br>
                    <br>var distinctId = AnalysysAgent.getDistinctId();
                    <br> console.log(distinctId)
                </div>
                <!--  用户属性设置 -->
                <!--  设置用户属性 -->
                <h2>AnalysysAgent.profileSet:设置用户属性 </h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileSet('Email','yonghu@163.com')">设置单个属性</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileSet({'Email':'yonghu@163.com','WeChatID':'微信号'})">设置多个属性</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计分析使用邮箱登录的用户</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置单个属性
                    <br>
                    <br> AnalysysAgent.profileSet("Email","yonghu@163.com");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计用户的登录方式邮箱登录,微信登录</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置多个属性
                    <br>
                    <br> var profiles = { "Email" : "yonghu@163.com", "WeChatID" : "微信号" }
                    <br>
                    <br> AnalysysAgent.profileSet(profiles);
                </div>
                <!--  首次设置用户属性 -->
                <h2>AnalysysAgent.profileSetOnce:首次设置用户属性</h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileSetOnce('activationTime','1521594686781')">激活时间 </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileSetOnce({'activationTime':'1521594686781','loginTime':'1521594726781'})">激活与首次登陆时间
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计用户的激活时间</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置单个属性
                    <br>
                    <br> AnalysysAgent.profileSetOnce( "activationTime" , "1521594686781");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计激活时间和首次登陆时间</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置多个属性
                    <br>
                    <br>var setOnceProfiles = { "activationTime": "1521594686781", "loginTime": "1521594726781" }
                    <br>
                    <br> AnalysysAgent.profileSetOnce(setOnceProfiles);
                </div>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                    </div>
                </div>
                <!--  设置用户属性相对变化值 -->
                <h2>AnalysysAgent.profileIncrement:设置用户属性相对变化值</h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileIncrement('age',20)">一个数值型属性 </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileIncrement({'age':20,'integral':200})">多个数值型属性 </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计用户的激活时间</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置单个属性
                    <br>
                    <br> AnalysysAgent.profileIncrement( "age" , 20);
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计使用产品用户年龄分析用户年龄占比和用户的积分情况</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置多个属性
                    <br>
                    <br>var profies = { "age":20 ,"integral":200 }
                    <br>
                    <br> AnalysysAgent.profileIncrement(profies);
                </div>
                <!--  设置列表类型的属性 -->
                <h2>AnalysysAgent.profileAppend:设置列表类型的属性</h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileAppend('Movies','霸王别姬')">单个列表类型属性 </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileAppend( {'Movies':'霸王别姬','Music':['一无所有','花房姑娘']})">设置多列表类型集合属性 </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileAppend('Movies',['海上钢琴师','指环王'])">设置多列表类型属性 </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计用户喜欢的单个电影</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置单个列表类型属性
                    <br>
                    <br> AnalysysAgent.profileAppend("Movies", "霸王别姬");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计用户喜欢的单个电影和多个音乐</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置单个列表类型属性
                    <br>
                    <br>var propertyObject = {"Movies":"霸王别姬","Music":["一无所有","花房姑娘"]}
                    <br>
                    <br> AnalysysAgent.profileAppend(propertyObject);
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要统计用户喜欢的多个电影"海上钢琴师"、“指环王”</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 设置多列表类型属性
                    <br>
                    <br>var properties = ["海上钢琴师","指环王"]
                    <br>
                    <br>AnalysysAgent.profileAppendArray( "Movies", properties);
                </div>
                <!--  删除设置的属性 -->
                <h2>AnalysysAgent.profileUnset/AnalysysAgent.profileDelete:删除设置的属性</h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="profileUnset('Movies')">删除单个用户属性 </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)" onclick="profileDelete()">清除所有属性 </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要删除已经设置的用户喜欢的电影这一用户属性</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 删除单个用户属性
                    <br>
                    <br> AnalysysAgent.profileUnset("Movies");
                </div>
                <br>
                <div class="panel-footer" style="word-wrap: break-word;">示例：要清除已经设置的所有用户属性</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    // 清除所有属性
                    <br>
                    <br>AnalysysAgent.profileDelete();
                </div>
                <h2>AnalysysAgent.getPresetProperties:获取预置字段</h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)"
                                    onclick="getPresetProperties()">获取预置字段</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：获取预置字段</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    AnalysysAgent.getPresetProperties();
                </div>
                <!--  清除本地设置 -->
                <h2>AnalysysAgent.reset:清除本地设置</h2>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                        <div class="panel panel-primary">
                            <div class="panel-heading text-center">
                                <a class="panel-title" href="javascript:void(0)" onclick="reset()">清除本地设置 </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="word-wrap: break-word;">示例：清除本地现有的用户属性,包括通用属性</div>
                <div class="panel-footer" style="word-wrap: break-word;">
                    AnalysysAgent.reset();
                </div>
            </div>
        </div>
    </div>
</body>

</html>